<!-- 总览页面左侧 -->
<template>
  <div class="left-page">
    <div class="left-page-list">
      <div
        v-for="(item, index) in leftPageList"
        :key="index"
        class="left-page-item"
        @click="item.name === '不良品' ? openDialog() : null"
      >
        <div
          class="iconImg"
          :style="{ backgroundImage: `url(${item.icon})` }"
        ></div>
        <div class="textRight">
          <div class="numText">{{ item.num }}</div>
          <div class="nameText">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogTableVisible" width="1849">
      <div class="dialog-header">
        <div class="dialog-title">不良品追踪列表</div>
        <div class="block">
          <span class="demonstration">筛选条件：</span>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="截止日期"
            :size="size"
            @change="filterDataByDate"
          />
        </div>
      </div>
      <div class="dialog-table">
        <div class="table-header">
          <div style="padding-left: 15px">时间</div>
          <div>产量</div>
          <div>合格品</div>
          <div>不良品</div>
          <div>状态</div>
          <div>合格率</div>
          <div>操作</div>
        </div>
        <div class="table-body">
          <div
            class="table-item"
            v-for="(item, index) in paginatedData"
            :key="index"
          >
            <div style="padding-left: 15px">{{ item.time }}</div>
            <div>{{ item.production }}</div>
            <div>{{ item.qualified }}</div>
            <div>{{ item.unqualified }}</div>
            <div>{{ item.status }}</div>
            <div>{{ item.rate }}</div>
            <div>{{ item.controls }}</div>
          </div>
        </div>
      </div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[12, 24, 36, 48, 60]"
        :size="size"
        layout="total, prev, pager, next, sizes,jumper"
        :total="filteredData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import iconYield from "../../../../assets/images/icon-yield.png";
import iconStandard from "../../../../assets/images/icon-standard.png";
import iconPassRate from "../../../../assets/images/icon-passRate.png";
import iconBadness from "../../../../assets/images/icon-badness.png";
const size = ref("default"); // 修正初始化
const value1 = ref("");
const dialogTableVisible = ref(false);
const selectedDateRange = ref(null);
const currentPage = ref(1); // 当前页码
const pageSize = ref(12); // 每页显示的数量
const leftPageList = ref([
  {
    icon: iconYield,
    num: "1,236",
    name: "计划产量",
  },
  {
    icon: iconYield,
    num: "236",
    name: "当前产量",
  },
  {
    icon: iconYield,
    num: "2,589",
    name: "设备产量",
  },
  {
    icon: iconStandard,
    num: "1,000",
    name: "合格品",
  },
  {
    icon: iconBadness,
    num: "200",
    name: "不良品",
  },
  {
    icon: iconPassRate,
    num: "87%",
    name: "合格率",
  },
]);

// 打开对话框的函数
const openDialog = () => {
  dialogTableVisible.value = true;
};

//弹窗ble数据
const dialogTableData = ref([
  {
    time: "2024-05-01",
    production: 487,
    qualified: 400,
    unqualified: 87,
    status: "启动中",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2024-10-02",
    production: "1200",
    qualified: "900",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2024-09-03",
    production: "1500",
    qualified: "1200",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2024-07-03",
    production: "1500",
    qualified: "1200",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2024-11-06",
    production: "1500",
    qualified: "1200",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2024-09-27",
    production: "1500",
    qualified: "1200",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2022-01-03",
    production: "1500",
    qualified: "1200",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2022-01-03",
    production: "1500",
    qualified: "1200",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2022-01-03",
    production: "1500",
    qualified: "1200",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2022-01-03",
    production: "1500",
    qualified: "1200",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2024-11-03",
    production: "1500",
    qualified: "1200",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2024-01-03",
    production: "1500",
    qualified: "1200",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2022-01-03",
    production: "1500",
    qualified: "1200",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
  {
    time: "2022-01-03",
    production: "1500",
    qualified: "1200",
    unqualified: "300",
    status: "合格",
    rate: "87%",
    controls: "详情",
  },
]);
// 计算当前页的数据
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return filteredData.value.slice(start, start + pageSize.value);
});

// 过滤后的数据
const filteredData = computed(() => {
  if (!selectedDateRange.value) return dialogTableData.value;
  const [startDate, endDate] = selectedDateRange.value;
  return dialogTableData.value.filter((item) => {
    const itemDate = new Date(item.time);
    return itemDate >= new Date(startDate) && itemDate <= new Date(endDate);
  });
});

// 日期筛选的函数
const filterDataByDate = (newDateRange) => {
  selectedDateRange.value = newDateRange;
  currentPage.value = 1; // 选择新的日期范围后，回到第一页
};

// 分页相关函数
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};
</script>

<style scoped lang="scss">
.left-page {
  width: 404px;
  height: 958px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: aliceblue;
  padding-left: 39px;
  .left-page-list {
    margin-top: 80px;
    width: 106px;
    height: 423px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .left-page-item {
      cursor: pointer;
      width: 130px;
      display: flex;
      align-items: center;
      .iconImg {
        width: 48px;
        height: 48px;
        background-size: cover;
        background-position: center;
        margin-right: 10px;
      }
      .textRight {
        height: 44px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .numText {
        font-family: "PangMenZhengDao";
        font-weight: 400;
        font-size: 26px;
        color: #73c0ff;
      }
      .nameText {
        font-family: "DingTalkJinBuTi";
        font-weight: 400;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
  .dialog-header {
    width: 1674px;
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .dialog-title {
      font-family: "PangMenZhengDao";
      font-weight: 400;
      font-size: 24px;
      background: linear-gradient(180deg, #ffffff 0%, #73c0ff 90%);
      -webkit-background-clip: text; /* 确保背景仅应用于文字 */
      -webkit-text-fill-color: transparent; /* 文字颜色透明以显示背景 */
    }
  }
  .demonstration {
    font-family: "DingTalkJinBuTi";
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
  }
  .dialog-table {
    width: 1794px;
    height: 735px;
    margin-top: 34px;
    font-family: "DingTalkJinBuTi";
    .table-header {
      width: 100%;
      height: 52px;
      background: linear-gradient(
        90deg,
        rgba(4, 52, 88, 0) 0%,
        #053759 23%,
        #0768a2 48%,
        #05385a 68%,
        rgba(4, 52, 88, 0) 98%
      );
      border-bottom: 2px solid rgba(115, 192, 255, 0.4);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 52px;
      text-align: left;
      div {
        width: 14%;
      }
    }
    .table-body {
      width: 100%;
      height: 635px;
      overflow-y: auto;
      .table-item {
        width: 100%;
        height: 52px;
        border-bottom: 1px solid rgba(115, 192, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        div {
          width: 14%;
        }
      }
      .table-item:hover {
        background: linear-gradient(
          90deg,
          #265980 0%,
          rgba(4, 52, 88, 0.3) 98%
        );
        border-image: linear-gradient(
            90deg,
            rgba(115, 192, 255, 0),
            rgba(115, 192, 255, 1),
            rgba(115, 192, 255, 0)
          )
          1 1;
      }
    }
  }
}

.table-body::-webkit-scrollbar {
  width: 2px; /* 滚动条宽度 */
}

.table-body::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条背景 */
  border-radius: 5px; /* 滚动条背景的圆角 */
}

.table-body::-webkit-scrollbar-thumb {
  background: rgba(29, 101, 153, 0.5); /* 滚动条滑块颜色 */
  border-radius: 5px; /* 滚动条滑块的圆角 */
}

.table-body::-webkit-scrollbar-thumb:hover {
  background: rgba(29, 101, 153, 0.5); /* 滚动条滑块悬停时的颜色 */
}

:deep(.el-dialog) {
  background: linear-gradient(247deg, #444d55 0%, rgba(63, 74, 83, 0.5) 100%);
  border-radius: 12px 12px 12px 12px;
  margin-top: 100px;
}
:deep(.el-input__wrapper) {
  background-color: rgba(29, 101, 153, 0.5);
}
:deep(.el-date-editor.el-input__wrapper) {
  width: 254px;
  height: 36px;
}
:deep(.el-date-editor.el-input__wrappe)r {
  box-shadow: 0 0 0 1px #28c4fe inset;
}
:deep(.el-overlay-dialo)g {
  top: -100px;
}
:deep(.el-pagination) {
  justify-content: center;
}
:deep(.el-pagination__total) {
  color: #ffffff;
}
:deep(.el-pager li) {
  background: #0769a200;
}
:deep(.el-pagination__jump) {
  color: #ffffff;
}
:deep(.el-input__inner) {
  color: #ffffff;
}
:deep(.el-pager li.is-active) {
  background-color: rgba(29, 101, 153, 0.5);
  color: #ffffff;
}
:deep(.el-pager li) {
  color: #ffffff;
}
:deep(.el-pagination button) {
  background: #05375900;
  color: rgb(255, 255, 255);
}
:deep(.el-select__wrapper) {
  background-color: rgba(29, 101, 153, 0.5);
  box-shadow: 0 0 0 1px #28c5fe00;
}
:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #28c5fe00;
}
:deep(.el-select__placeholder.is-transparen)t {
  color: #ffffff;
}
:deep(.el-select__caret) {
  color: #ffffff;
}
:deep(.el-select__placeholder) {
  color: #ffffff;
}
:deep(.el-select-dropdown__item.is-selected) {
  color: #000000 !important;
}
:deep(.el-date-editor .el-range__icon) {
  color: #fff;
}
:deep(.el-date-editor .el-range-separator) {
  color: #fff;
}
:deep(.el-range-input) {
  color: #ffffff;
}
:deep(.el-date-table td.start-date .el-date-table-cell__text) {
  background-color: rgba(29, 101, 153, 0.5) !important;
}
:deep(.el-select-dropdown__item .is-selected .is-hovering) {
  color: #000000 !important;
}
:deep(.el-dialog__headerbtn) {
  background: url("../../../../assets/images/icon-close.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 20px;
  margin-top: 10px;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #00000000;
}
</style>
